﻿@using thousandClear.Areas.Admin.Models;
@model List<ProjectModel>
<div id="app">
    <div class="ui-flex ui-box font-center bg-white" style="padding: 10px 0px;">
        <div class="col20">
            <span style="color: white;">返回</span>
        </div>
        <div class="col60 font-16">
            <span>签约千净</span>
        </div>
        <div class="col20">

        </div>
    </div>
    <div class="ui-flex" v-if="showGood">
        <div class="ui-flex ui-box" style="padding: 20px 0px;">
            <img src="~/Statics/Images/shop/main/welcome2.png" style="width: 80%; margin-left: 10%;" />
        </div>
        <div class="ui-flex ui-box" style="padding: 5px 10px;">
            <div class="col20">开卡类型:</div>
            <select class="col40" id="cardType" v-model="cardType" v-on:change="selectType">
                <option value="2">每月2次</option>
                <option value="4">每月4次</option>
                <option value="8">每月8次</option>
                <option value="12">每月12次</option>
            </select>
            <select class="col40" id="area" v-model="area" v-on:change="selectType">
                <option value="0-200">0-200平方米</option>
                <option value="200-300">200-300平方米</option>
                <option value="300-400">300-400平方米</option>
            </select>
        </div>
        <div class="ui-flex ui-box" style="padding: 5px 10px;">
            <div class="col20">办卡时长:</div>
            <select class="col40" id="type" v-model="type" v-on:change="selectType">
                <option value="6">月卡</option>
                <option value="2">季卡</option>
                <option value="3">半年</option>
                <option value="4">全年</option>
            </select>
        </div>
        <div class="ui-flex ui-box font-red" style="padding: 0px 5px;">
            *以下为项目详情内容
        </div>
        <table class="ui-flex ui-box" style="padding: 0 10px;">
            <tbody>
                <tr class="ui-flex bg-blue font-center font-black font-18">
                    <td>
                        项目
                    </td>
                    <td>
                        项目详情
                    </td>
                    <td></td>
                </tr>
                @foreach (ProjectModel item in Model)
            {
                    <tr class="ui-flex bg-white font-black ">
                        <td class="font-12" style="border-top: none; border-right: none; width: 20%;">
                            <span>@item.dimName</span>
                        </td>
                        <td class="font-12 " style="border-top: none; border-right: none;">
                            <span class="font-wrap">@item.dimDesc</span>
                        </td>
                        <td  style="border-top: none;">
                            <span class="icon-true"></span>
                        </td>
                    </tr>
                }
            </tbody>

        </table>
        <div class="ui-flex ui-box font-red" style="padding: 0px 5px; display:none;">
            *请勾选{{{ogsSeqNum}}}项赠送服务
        </div>
        <table class="ui-flex ui-box" style="padding: 0 10px; display:none;">
            <tbody>
                <tr class="ui-flex bg-blue font-center font-black font-18">
                    <td>
                        项目
                    </td>
                    <td>
                        项目详情
                    </td>
                    <td></td>
                </tr>
                @foreach (var item in ViewBag.T2)
              {
                    <tr class="ui-flex bg-white font-black ">
                        <td class="font-12" style="border-top: none; border-right: none;  width: 20%;">
                            <span>@item.dimName</span>
                        </td>
                        <td class="font-12" style="border-top: none; border-right: none;">
                            <span class="font-wrap">@item.dimDesc</span>
                        </td>
                        <td style="border-top: none;">
                            <span data-id="@item.DIMID" class="icon-true1"></span>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <div v-on:tap="BuyCofime" class="ui-flex bg-blue font-16 font-white font-center ui-box" style="position: fixed; bottom: 0; left: 0; height: 40px; line-height: 40px"><span>签约千净￥{{{price}}}.00</span></div>
    </div>
    <div class="ui-flex ui-box" v-if="showif" style="padding: 10px;">
        <img class="ui-flex" src="~/Statics/Images/shop/main/hetong.jpg" />
        <a class="bg-blue font-white btn font-center" v-on:tap="goBuy" style="width:60%; display: block; margin-left: 20%; border-radius: 5px; padding: 10px 0px; ">我接受</a>
    </div>
    <div class="ui-flex" style="height: 50px;"></div>
    <div>
        <form id="form" method="post" action="">
            <input type="hidden" v-bind:value="data" name="data" />
        </form>
    </div>

    <input type="hidden" value="@ViewBag.OpenId" id="hiddOpenId" />
    <input type="hidden" value="@ViewBag.Levels" id="hiddLevels" />

</div>



@section Styles{
    @Styles.Render("~/cssbundles/consumer/subscribe")

}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>
        var model = new Vue({
            el: '#app',
            data: {
                OGSID: @ViewBag.goodsMessage.OGSID,
                price: @ViewBag.goodsMessage.ogsSalePrice,
                OpenId: '@ViewBag.OpenId',
                cardType:'@ViewBag.goodsMessage.ogsTimeMonth',
                type:'@ViewBag.goodsMessage.ogsType',
                area:'@ViewBag.goodsMessage.ogsArea',
                ogsSeqNum:'@ViewBag.goodsMessage.ogsSeqNum',
                selectModel:[],
                stringSelectModel:"",
                showGood:true,
                showif:false,
                order: '@ViewBag.order',

            },
            computed: {
                data: function () {

                   
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                back: function () {
                    window.location.replace("./Main/Common?openid=@ViewBag.OpenId");
                },
                selectType:function(){
                    var self=this;
                   
                    $.ajax({
                        type: "get",
                        //url: "selectType?cardType="+self.cardType+"&area="+self.area+"&type="+self.type,
                        url: "Sign/selectType?cardType="+self.cardType+"&area="+self.area+"&type="+self.type,
                        contentType: "application/json",
                        success: function (data) {
                            var Jgood=JSON.parse(data);
                            self.ogsSeqNum=Jgood.ogsSeqNum;
                            self.area=Jgood.ogsArea;
                            self.cardType=Jgood.ogsTimeMonth;
                            self.type=Jgood.ogsType;
                            self.price=Jgood.ogsSalePrice;
                            self.OGSID=Jgood.OGSID;
                        }

                    })
                    if(self.type==4){
                        self.selectModel=[];
                        var $span= $("span[data-id]")
                        //$span.each(function(){
                        //    var id=$(this).attr("data-id");
                        //    self.selectModel.push(id);
                        //    $(this).removeClass("icon-true1");
                        //    $(this).addClass("icon-true");                              
                        //})
                        this.stringSelectModel=this.selectModel.toString();            
                    }
                    else{
                        self.selectModel=[];
                        var $span= $("span[data-id]")
                        $span.each(function(){
                            var id=$(this).attr("data-id");
                            $(this).removeClass("icon-true");
                            $(this).addClass("icon-true1");                              
                        })
                        this.stringSelectModel=this.selectModel.toString();     
                    
                    }

                },
                goBuy:function(){
                    $("#form").submit();
                },
                BuyCofime:function(){
                    var Ilength=this.selectModel.length;
                    console.log(Ilength);
                    console.log(this);
                    if(this.ogsSeqNum!=Ilength){
                        alert("您的赠送次数与勾选次数不相等！！");
                        return;
                    }
                    this.showGood=false;
                    this.showif=true;                
                
                }

            }

        })
        $(function(){

            if(@ViewBag.good!=0){
                var $span= $("span[data-id]").each(function(){
                    var id=$(this).attr("data-id");
                    model._data.selectModel.push(id);
                    $(this).removeClass("icon-true1");
                    $(this).addClass("icon-true");                              
                })
                $("#type option[value='4'] ").attr("selected","true");
               
                model._data.stringSelectModel=model._data.selectModel.toString();            
            }

            


            $("span[data-id]").on("click",function(){
                var item=model._data.selectModel;
                var id=$(this).attr("data-id");
                var i=jQuery.inArray(id,item);
                if(i=="-1"){
                    model._data.selectModel.push(id);
                    $(this).removeClass("icon-true1");
                    $(this).addClass("icon-true");

                }
                else{
                    model._data.selectModel.splice($.inArray(id,model._data.selectModel),1);
                    $(this).removeClass("icon-true");
                    $(this).addClass("icon-true1")
                }
                model._data.stringSelectModel=model._data.selectModel.toString();

            })
        })

    </script>
}